
<template>
  <div class="common-layout">
    <el-container class="el-container">
      <!-- <el-aside class="el-aside" width="200px">
      </el-aside> -->
      <el-container>
        <el-header class="el-header">
          <img src="..\assets\images\天津滨海国际公司.png" />

          <div class="welcom-style">欢迎来到天津滨海国际机场</div>
          <div class="router-link">
            <router-link to="/login">管理页面</router-link>
          </div>
        </el-header>
        <!-- 轮播 -->
        <el-main class="el-main">
          
          <!-- 表格主内容 -->
          <div class="common-layout">
            <el-container>
              <el-header>
                <el-breadcrumb class="el-bread">
                  <el-breadcrumb-item>当前位置：</el-breadcrumb-item>
                  <el-breadcrumb-item>航班信息</el-breadcrumb-item>
                  <el-breadcrumb-item>每日航班信息</el-breadcrumb-item>
                  <el-breadcrumb-item>XXX</el-breadcrumb-item>
                </el-breadcrumb>
              </el-header>
              <el-container>
                <el-aside width="200px">
                  <el-text style="font-size: 100"
                    ><img
                      src="..\assets\images\飞机图标.png"
                    />航班信息</el-text
                  >
                  <el-tree
                    :data="data"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                  ></el-tree>
                </el-aside>
                <el-main>
                  <div>
                    <el-form ref="form" :model="form" label-width="100px">
                      <el-form-item label="请输入航班号">
                        <el-row>
                          <el-col :span="40">
                            <el-input
                              style="width: 200%"
                              v-model="form.name"
                            ></el-input>
                          </el-col>
                        </el-row>
                        <el-col :span="20">
                          <el-button type="primary" @click="onSubmitFlno"
                            >查询</el-button
                          >
                        </el-col>
                      </el-form-item>

                      <div class="link-top"></div>

                      <el-form-item label="目的地">
                        <el-input
                          style="width: 400px"
                          v-model="form.name"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="航空公司">
                        <el-input
                          style="width: 400px"
                          v-model="form.name"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="日期">
                        <el-select v-model="form.region" placeholder="今天">
                          <el-option label="昨天" value="yesterday"></el-option>
                          <el-option label="今天" value="today"></el-option>
                          <el-option label="明天" value="tomorrow"></el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item label="计划出发时间">
                        <el-col :span="13">
                          <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="form.startDate"
                            style="width: 70%"
                          ></el-date-picker>
                          <el-col :span="1">到</el-col>
                          <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="form.endDate"
                            style="width: 70%"
                          ></el-date-picker>
                        </el-col>
                      </el-form-item>

                      <el-form-item>
                        <el-button type="primary" @click="onSubmit"
                          >搜索</el-button
                        >
                      </el-form-item>
                    </el-form>
                  </div>

                  <!-- 数据表 -->
                  <el-table
                    ref="singleTable"
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%"
                  >
                    <el-table-column
                      property="dfltCfno"
                      label="飞机号"
                      width="150"
                    >
                    </el-table-column>
                    <el-table-column
                      property="dfltFlno"
                      label="航班号"
                      width="150"
                    >
                    </el-table-column>
                    <el-table-column
                      property="dfltAwcd"
                      label="航空公司"
                      width="150"
                    >
                    </el-table-column>
                    <el-table-column property="apcd" label="航线" width="150">
                    </el-table-column>
                    <el-table-column property="apcd" label="日期" width="150">
                    </el-table-column>
                    <el-table-column
                      property="fptt"
                      label="计划起飞时间"
                      width="150"
                    >
                    </el-table-column>
                    <el-table-column
                      property="fplt"
                      label="预计降落时间"
                      width="150"
                    >
                    </el-table-column>
                  </el-table>
                  <!-- 分页组件 -->
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="count"
                    :current-page="page"
                    @current-change="changePage"
                  >
                  </el-pagination>
                </el-main>
              </el-container>
            </el-container>
          </div>
          
        </el-main>

        <el-footer class="el-footer"> </el-footer>
      </el-container>
    </el-container>
  </div>
</template>


<style>
.link-top {
  width: 100%;
  height: 35px;
  border-top: 1px dashed #ccc;
  margin-top: 10px;
}
.common-layout,
.el-container {
  height: 100vh;
}
.demo-image {
  height: auto;
}
.welcom-style {
  position: absolute;

  top: 4px;
  left: 50%;
  font-size: 24px;
  color: #333;
  transform: translateX(-50%);
}
.router-link {
  float: right;
  font-size: 18px;
  color: #333;
}



.el-footer {
  background-color: #751f39;
}
.el-bread {
  color: #333;
  font-size: 18px;
  font-weight: 600;
  padding: 10px 0;
  margin: 0;
}
</style>


<script>

export default {
  data() {
    return {
      formLabelWidth: "120px", //表单文本宽度
      // tableData: [{}], //图书分页数据
      count: 0, //记录总数
      page: 1, //当前页码
      pageCount: 0, //总页数
      data: [], //存放分页数据

      form: {
        name: "",
        region: "",
        startDate: "",
        endDate: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },

      data: [
        {
          label: "每日航班信息",
          children: [
            {
              label: "国际离港",
            },
            {
              label: "国内离港",
            },
            {
              label: "国际到港",
            },
            {
              label: "国内到港",
            },
          ],
        },
        {
          label: "通用航空公司",
          children: [
            {
              label: "通航航空公司",
            },
          ],
        },
      ],
      
    };
  },

  methods: {
    
  changePage(currentPage) {
    this.page = currentPage;
    this.fetchData();
  },
  fetchData() {
    // const tokenValue = localStorage.getItem('tokenValue');
    // localStorage.setItem('tokenValue', tokenValue);
    const pageNum = this.page;
    const pageSize = 10; // 设置每页显示的数据条数
   
    this.$axios.get('http://localhost:8888/dfdl/a2401', 
    { params: { pageNum, pageSize }
  //   ,headers: {
  //   "content-type": "application/x-www-form-urlencoded",
  //   "satoken": localStorage.getItem('tokenValue')
  // }
  })
      .then((response) => {
        const result = response.data;
        this.count = result.count;
        this.pageCount = Math.ceil(result.count / pageSize);
        this.data = result.data;
      })
      .catch((error) => {
        console.error(error);
      });
  }
},

  mounted() {
    // this.getData();
    const objApp = this;
    this.changePage(1);
  },
};
</script>



